.tiptap {
  .template-variable {
    background-color: rgba(69, 81, 229, 0.5);
    padding: 0 4px !important;
    color: #4551e5;
    cursor: text;
    display: inline-block;
    position: relative;
    box-shadow: none;
    transition: background-color 0.2s ease;
    min-width: 2em;
    z-index: 5;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit !important;
    font-weight: bold;
    text-align: left; /* 默认左对齐 */

    border-radius: 5px;

    background-color: rgba(69, 81, 229, 0.1) !important;
    /* 自适应宽度相关属性 */
    width: auto;
    box-sizing: border-box;
    margin: 2 5px !important;

    /* 改进渲染 */
    vertical-align: baseline;

    /* 有值时居中 */
    &[value]:not([value=""]) {
      text-align: center;
    }

    /* 输入为空时显示占位符 */
    &:placeholder-shown {

      color: rgba(69, 81, 229, 0.5);
      opacity: 1;
      text-align: left;
    }

    /* 改进placeholder样式，使其更明显 */
    &::placeholder {
      color: rgba(69, 81, 229, 0.5) !important;
      opacity: 1 !important;
      font-weight: 500 !important;
      text-align: center !important;
    }


    /* 增强空值时的可视性 */
    &:empty,
    &[value=""] {
      min-width: 6em;
      text-align: left;
      background-color: rgba(255, 223, 186, 0.7); /* 增强背景色 */
    }

    /* 用户输入时的样式 */
    &:not(:placeholder-shown) {
      text-align: center;
      background-color: rgba(255, 223, 186, 0.5);
    }

    &:hover {
      background-color: rgba(255, 223, 186, 0.8);
      box-shadow: none;
    }

    /* 编辑状态样式 */
    &:focus,
    &.ProseMirror-selectednode,
    &.editing-template-var {
      outline: none;
      background-color: rgba(255, 223, 186, 0.8);
      box-shadow: none;
      z-index: 10;
    }

    /* 去除input默认样式 */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }



    /* 去除Firefox中input的默认边框 */
    &::-moz-focus-inner {
      border: 0;
    }
  }
}

/* 模板变量被选中时的样式 */
.template-variable-selected {
  background-color: #e3f2fd !important;
  border: 1px solid #2196f3 !important;
  box-shadow: 0 0 0 1px #2196f3 !important;
}

/* 确保选择时的可见性 */
.template-variable {
  /* ...existing code... */

  /* 确保可以被选择 */
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;

  /* 确保鼠标样式正确 */
  cursor: text;

  /* 确保可以接收鼠标事件 */
  pointer-events: auto;
}

/* 编辑状态下移除选择样式 */
.template-variable.editing-template-var.template-variable-selected {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 选择高亮样式 */
.template-variable::selection {
  background-color: #b3d4fc;
  color: inherit;
}

.template-variable::-moz-selection {
  background-color: #b3d4fc;
  color: inherit;
}
